﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DFT.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>شجرة العائلة</title>
    <link href="Styles/StyleSheet.css" type="text/css" rel="stylesheet" />
    <script src="JQuery/js/jquery-1.5.1.min.js" language="javascript" type="text/javascript"></script>
    <script src="JQuery/js/jquery-ui-1.8.11.custom.min.js" language="javascript" type="text/javascript"></script>
    <link rel="stylesheet" href="JQuery/css/smoothness/jquery-ui-1.8.11.custom.css" type="text/css"
        media="all" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="large_header">
        <table width="100%">
            <tr>
                <td class="large_logo">
                    شجرة العائلة
                </td>
                <td align="left" valign="middle">
                    <div class="login_f">
                        <table>
                            <tr>
                                <td align="right">
                                    البريد الإلكتروني
                                </td>
                                <td align="right">
                                    كلمة المرور
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <input type="text" class="text ui-widget-content ui-corner-all" id="loginEmail" runat="server" />
                                </td>
                                <td align="right">
                                    <input type="password" class="text ui-widget-content ui-corner-all" id="loginPass" runat="server" />
                                </td>
                                <td>
                                    <asp:Button ID="lLogin" CssClass="button gray" Text="دخول" runat="server" OnClientClick="return ValidLogin();return;"
                                        OnClick="lLogin_Click" />
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <asp:CheckBox ID="lRem" runat="server" Text="تذكرني" />
                                </td>
                                <td align="center">
                                    <a href="#" onclick="pop();return false;">نسيت كلمة المرور؟</a>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" align="center">
                                    <asp:Label ID="failLoginMsg" runat="server" CssClass="validateTips"></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="homeContent">
        <table width="100%">
            <tr>
                <td class="regForm" align="center" valign="middle">
                    <table>
                        <tr>
                            <td colspan="3">
                                <h2>
                                    قائمة التسجيل</h2>
                                <br />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                الاسم الكامل
                            </td>
                            <td>
                                <input class="text ui-widget-content ui-corner-all" type="text" id="rName" runat="server" />
                            </td>
                            <td>
                                <span class="alert">*</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                البريد الإلكتروني
                            </td>
                            <td>
                                <input class="text ui-widget-content ui-corner-all" type="text" id="rEmail" runat="server" />
                            </td>
                            <td>
                                <span class="alert">*</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                تأكيد البريد الإلكتروني
                            </td>
                            <td>
                                <input class="text ui-widget-content ui-corner-all" type="text" id="rReEmail" />
                            </td>
                            <td>
                                <span class="alert">* </span>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                كلمة المرور
                            </td>
                            <td>
                                <input class="text ui-widget-content ui-corner-all" type="password" id="rPass" runat="server" />
                            </td>
                            <td>
                                <span class="alert">* </span>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                تأكيد كلمة المرور
                            </td>
                            <td>
                                <input class="text ui-widget-content ui-corner-all" type="password" id="rRePass" />
                            </td>
                            <td>
                                <span class="alert">* </span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" align="center">
                                <asp:Button ID="rReg" CssClass="button gray" runat="server" Text="تسجيل" OnClientClick="return ValidReg();return;"
                                    OnClick="rReg_Click" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" align="center">
                                <asp:Label ID="failRegMsg" runat="server" CssClass="validateTips"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="adsContent">
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">

        function updateTips(errEl, errMsg) {
            errEl.text(errMsg).addClass("ui-state-highlight");
            setTimeout(function () {
                errEl.removeClass("ui-state-highlight", 1500);
            }, 500);
        }

        function checkRequired(el, errEl, errMsg) {
            if (el.val() == "") {
                el.addClass("ui-state-error");
                updateTips(errEl, errMsg);
                return false;
            } else {
                return true;
            }
        }

        function checkEqual(el1, el2, errEl, errMsg) {
            if (el1.val() != el2.val()) {
                el1.addClass("ui-state-error");
                updateTips(errEl, errMsg);
                return false;
            } else {
                return true;
            }
        }

        function checkLength(el, errEl, errMsg, min, max) {
            if (el.val().length > max || el.val().length < min) {
                el.addClass("ui-state-error");
                updateTips(errEl, errMsg);
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(el, errEl, errMsg, regexp) {
            if (!(regexp.test(el.val()))) {
                el.addClass("ui-state-error");
                updateTips(errEl, errMsg);
                return false;
            } else {
                return true;
            }
        }

        function ValidLogin() {
            var loginEmail = $("#loginEmail"),
                loginPass = $("#loginPass"),
                allFields = $([]).add(loginEmail).add(loginPass),
                tips = $("#failLoginMsg");

            var bValid = true;
            allFields.removeClass("ui-state-error");

            bValid = bValid && checkRequired(loginEmail, tips, "يجب إدخال البريد الالكتروني");
            bValid = bValid && checkRequired(loginPass, tips, "يجب ادخال كلمة المرور");

            return bValid;
        }

        function ValidReg() {
            var rName = $("#rName"), 
                rEmail = $("#rEmail"),
                rReEmail = $("#rReEmail"),
                rPass = $("#rPass"),
                rRePass = $("#rRePass"),
                allFields = $([]).add(rName).add(rEmail).add(rReEmail).add(rPass).add(rRePass),
                tips = $("#failRegMsg");

            var bValid = true;
            allFields.removeClass("ui-state-error");


            bValid = bValid && checkRequired(rName, tips, "يجب إدخال الاسم");
            bValid = bValid && checkRequired(rEmail, tips, "يجب إدخال البريد الالكتروني");
            bValid = bValid && checkRegexp(rEmail, tips, "eg. ui@jquery.com", /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
            bValid = bValid && checkRequired(rReEmail, tips, "يجب إدخال تأكيد البريد الالكتروني");
            bValid = bValid && checkEqual(rReEmail,rEmail, tips, "البريد الالكتروني غير متطابق");
            bValid = bValid && checkRequired(rPass, tips, "يجب ادخال كلمة المرور");
            bValid = bValid && checkRequired(rRePass, tips, "يجب ادخال تأكيد كلمة المرور");
            bValid = bValid && checkEqual(rRePass, rPass, tips, "كلمة المرور غير متطابقة");

            return bValid;
        }

        function ResetPasswordRequest(email) {
            $.ajax({
                type: "POST",
                url: "AJAX/ResetPasswordRequest.aspx",
                data: "email=" + email,
                cache: false,
                async: false,
                success: ResetPasswordRespons
            });
        }

        function ResetPasswordRespons(msg) {
            if (msg == "0") {
                $("#dialog-form").dialog("close");
            }
            else if (msg == "1") {
                updateTips($("#formMsgFail"), "هذا البريد غير موجود في سجلاتنا يرجى التحقق");
            }
            else {
                updateTips($("#formMsgFail"), msg);
            }
        }

        function pop() {
            $("#dialog:ui-dialog").dialog("destroy");
            var email = $("#email"),
                allFields = $([]).add(email),
                tips = $("#formMsgFail");

            $("#dialog-form").dialog({
                modal: true,
                show: "fold",
                hide: "fold",
                width: 350,
                height: 220,
                buttons: {
                    "ارسال": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");

                        //bValid = bValid && checkLength(email, tips, "يجب أن يكون عدد الحروف بين 6 و 80 ", 6, 80);
                        //bValid = bValid && checkRegexp(email, tips, "eg. ui@jquery.com", /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

                        if (bValid) {
                            ResetPasswordRequest(email.val());
                        }
                    },
                    "إلغاء الأمر": function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                    tips.text("").removeClass("ui-state-error");
                }
            });
        }
    </script>
    <div id="dialog-form" title="نسيت كلمة السر" style="display: none;">
        <p id="formMsgFail" class="validateTips">
        </p>
        <fieldset>
            <label for="email">
                البريد الإلكتروني</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"
                style="margin-bottom: 12px; width: 95%; padding: .4em;" />
        </fieldset>
    </div>
    </form>
</body>
</html>
